<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>
    <script>
        // todo: 可以优化页面效果 例如局部加载动画
        // 打分特效 如果9分则显示1-9停止
        // 打字机效果(需要规范的回答文本格式(自定义), 然后找到关键文本就写入到页面上,直到遇见关键标志结束, 随之把某个状态更新成finish, 知道三项内容全部完成)
        // 效果预览, 可借助iframe标签, 原生网页实现不易v-html更好
        // 响应内容可以做 md格式和代码高亮, 需要借助外部js库和样式库
        $(document).ready(function () {
            var $textarea = $('#myTextarea');
            // 监听变化
            $textarea.on('input', () => {
                let blob = new Blob([$textarea.val()], {
                    'type': 'text/html'
                })
                $('#preview').attr('src', URL.createObjectURL(blob))
            })

            $('#uploadButton').click(function () {
                $('#fileInput').click();
            });
            $('#fileInput').change(function () {
                var fileName = $(this).val().split('\\').pop();
                $('#fileName').text(fileName);
            });




            var $lineCountDisplay = $('#lineCount');
            // todo: 定义状态(1.评估 2.建议 3.依据),完成一项停止某项加载

            function updateLineCount() {
                var text = $textarea.val();
                // 直接按换行符分割并获取行数  
                var lines = text.split(/\r\n|\r|\n/).length;
                $lineCountDisplay.text(lines);
            }

            // 监听input和paste事件  
            $textarea.on('input paste', updateLineCount);

            // 初始化时也显示行数  
            updateLineCount();
            $('#correction').on('click', () => {
                let reqFinish = false

                // 设置加载效果
                let spinnerHtml = `
                <div class="d-flex align-items-center">
                    <strong role="status">正在批阅中...</strong>
                    <div class="spinner-border ms-auto" aria-hidden="true"></div>
                </div>
                `
                $(".load").html(spinnerHtml) // 加载效果
                var xhr = new XMLHttpRequest();
                xhr.open('POST', 'http://127.0.0.1:5000/coderv', true);
                xhr.setRequestHeader('Content-Type', 'application/json');  // 设置请求头

                xhr.onload = function () {
                    if (xhr.status === 200) {
                        console.log('请求成功');
                        reqFinish = true
                        let resTxt = xhr.responseText  // 响应文本
                        console.log(xhr, '<-------');
                        let ansewer = JSON.parse(resTxt.replace('，', ','))
                        console.log(ansewer);
                        // 1.展示分数
                        $('#score').text(ansewer.totalScore)

                        // 2.展示批改建议
                        let suggestHtml = '';
                        ansewer.suggest.forEach((value, index) => {
                            suggestHtml += `
                            <h4 id="normality">${value.title}</h4>
                            <h6 id="comment">${value.comment}</h6>
                            <div class="scoringBox">
                                <div class="progress">
                                    <div class="progress-bar progress-bar-striped bg-info" role="progressbar" id="progress"
                                        style="width: ${value.score}%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                    </div>
                                </div>
                                <p>${value.score}</p>
                            </div><hr/>
                            `
                        });
                        $('#suggest').html(suggestHtml)
                        
                        // 3.展示评分依据
                        $('#criteria').text(
                            extractCriteria(resTxt).toString()
                        )

                    } else {
                        console.error('请求失败:', xhr.statusText);
                    }
                };

                xhr.onprogress = function (event) {
                    // 可实现文字流效果, 待开发
                    let resText = event.target.responseText
                    let strLst = resText.replace(/[^\S\n]/g, '').split('\n');
                    // console.log(strLst);
                }

                xhr.onerror = function () {
                    console.error('请求错误');
                };

                xhr.send(JSON.stringify({ code: document.getElementById('myTextarea').value }));  // 发送请求并传递数据
            })
        });
    </script>

    <style>
        .noBorder {
            border: 1px;
        }

        .SuggestedDiv>.card {
            background-color: rgb(240, 241, 242);
            margin-bottom: 10px;
            border: 0;
            border-left: 4px black solid;
            border-radius: 10px;
        }

        .SuggestedDiv>.card>* {
            border: 0;
            border-radius: 10px;
            border-left: 5px rgb(240, 241, 242);
            background-color: rgb(240, 241, 242);
            padding-left: 50px;
        }

        .ScoringDiv>.card {
            background-color: white;
            margin-bottom: 10px;
            border-top: 4px rgb(14, 165, 233) solid;
            border-radius: 10px;
            padding: 10px;
        }

        .ScoringDiv>.card>* {
            background-color: white;
            border: 0;
            border-radius: 10px;
        }

        .ScoringDiv>.card h4 {
            font-size: 22px;
        }

        .submitButtons>* {
            margin-bottom: 10px;
            border-radius: 12px;
            height: 40px;
        }

        .ScoringPoint {
            font-weight: 600;
            font-size: 100px;
            color: rgb(58, 183, 191);
        }

        .appraiseText {
            color: rgb(107, 114, 128);
            margin-bottom: 20px;
        }

        .card-body {
            padding-top: 0px;
            color: rgb(107, 114, 128);
        }

        .custom-file-input {
            padding: 5px 10px;
            border-radius: 20px;
            background-color: rgb(191, 219, 254);
            height: 35px;
            display: inline-block;
        }

        .custom-file-input>* {
            background-color: rgb(191, 219, 254);
            display: inline-block;
            border: 0px;
        }

        .functionButtons {
            margin-bottom: 10px;
        }

        .functionButtons * {
            color: rgb(29, 78, 216);
        }

        .scoringBox {
            display: flex;
            padding-top: 15px;
            justify-content: space-between;
            height: 40px;
        }

        .scoringBox>.progress {
            width: 70%;
            height: 20px;
        }

        .scoringBox>p {
            font-size: 40px;
            position: relative;
            top: -25px;
            color: rgb(13, 202, 240);
            font-weight: 600;
        }
    </style>

</head>

<body>
    <div class="container-field m-5 p-2">
        <!-- 主要网格 -->
        <div class="row">

            <!-- 左侧输入部分 -->
            <div class="col-md-5">

                <div>
                    <div>
                        <span class="badge bg-secondary"
                            style="float: right; margin-right: 20px; font-size: 15px;">代码行数<span class="badge bg-danger"
                                style="margin-left: 5px;" id="lineCount">0</span></span>
                        <h4 class="h4"> 输入代码</h4>
                    </div>
                    <div class="functionButtons">
                        <div class="custom-file-input">
                            <button id="uploadButton">上传文件</button>
                            <input type="file" id="fileInput" style="display: none;">
                            <p id="fileName"></p>
                        </div>
                    </div>
                    <div>
                        <textarea class="form-control noBorder" rows="15" id="myTextarea" name="text"></textarea>
                    </div>
                </div>
                <div>
                    <hr>
                    <div class="h4">批改结果</div>
                    <div></div>
                    <div>
                        <textarea class="form-control noBorder" rows="10" id="comment" name="text"></textarea>
                    </div>

                </div>

            </div>
            <div class="col-md-4">
                <span class="lead">预览框:</span>
                <iframe class="w-100 h-100 overflow-auto" src="" frameborder="0" id="preview"
                    style="border: 2px solid palevioletred; border-radius: 7px;"></iframe>
            </div>
            <div class="col-md-3">
                <div class="d-grid submitButtons">
                    <button type="button" class="btn btn-primary btn-block" id="correction">立即批改代码</button>
                    <button type="button" class="btn btn-secondary btn-block">清除并输入代码</button>
                </div>
                <div>
                    <div>
                        <h1 class="display-1 text-center lead ScoringPoint" id="score" style="content: '111';">?</h1>
                        <h5 class="text-center">总分</h5>
                    </div>
                    <div class="appraiseText" id="criteria">

                    </div>
                </div>

                <div class="ScoringDiv" id="suggest">
                    <div>
                        <h4 id="normality">代码规范性</h4>
                        <h6 id="comment" class="load">点击`立即批改代码`即可看到结果</h6>
                        <div class="scoringBox">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" id="progress"
                                    style="width: 0%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <p>??</p>
                        </div>
                        <hr />
                    </div>

                    <div>
                        <h4 id="normality">代码完整性</h4>
                        <h6 id="comment" class="load">点击`立即批改代码`即可看到结果</h6>
                        <div class="scoringBox">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" id="progress"
                                    style="width: 0%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <p>??</p>
                        </div>
                        <hr />
                    </div>

                    <div>
                        <h4 id="normality">代码正确性</h4>
                        <h6 id="comment" class="load">点击`立即批改代码`即可看到结果</h6>
                        <div class="scoringBox">
                            <div class="progress">
                                <div class="progress-bar progress-bar-striped bg-info" role="progressbar" id="progress"
                                    style="width: 0%" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100">
                                </div>
                            </div>
                            <p>??</p>
                        </div>
                        <hr />
                    </div>

                </div>
            </div>
        </div>
    </div>
    </div>
    </div>
</body>

</html>